<template>
  <div>
    <input id="topicId" type="hidden" value="47"/>
    <input id="isAdmin" type="hidden" value=""/>
    <input id="STATICURL" type="hidden" value="//static.clewm.net/cli"/>

    <!-- 导航菜单 -->
    <nav class="cli_nav new-light scene_mobile clearfix">
      <ul class="sub_nav sub_mobile_nav cli_head_container clearfix">
        <li><router-link class="t06971093650622ab_sep [navigation_text]" to="/qrcode/text" @click="StatisticsData(120,11)" title="生成文本二维码">文本</router-link></li>
        <li><router-link class="tab_sep on [navigation_url]" to="/qrcode/url" @click="StatisticsData(120,12)" title="生成网址二维码">网址</router-link></li>
        <li><router-link class="tab_sep [navigation_files]" to="/qrcode/files" @click="StatisticsData(120,13)" title="生成文件二维码">文件</router-link></li>
        <li><router-link class="tab_sep [navigation_img]" to="/qrcode/img" @click="StatisticsData(120,14)" title="生成图片二维码">图片</router-link></li>
        <li><router-link class="tab_sep [navigation_multimedia]" to="/qrcode/multimedia" @click="StatisticsData(120,15)" title="生成音视频二维码">音视频</router-link></li>
        <li><router-link class="tab_sep [navigation_vcard]" to="/qrcode/vcard" @click="StatisticsData(120,16)" title="名片二维码">名片</router-link></li>
        <li><router-link class="tab_sep [navigation_weixin]" to="/qrcode/weixin" @click="StatisticsData(120,17)" title="美化微信二维码">微信</router-link></li>
        <li><router-link class="tab_sep [navigation_form]" to="/qrcode/form" @click="StatisticsData(120,124001)" title="记录表单">表单</router-link></li>
        <li><router-link class="tab_sep [navigation_batch]" to="/qrcode/batch" title="批量生码">批量生码</router-link></li>
        <li><router-link class="tab_sep [navigation_tools]" to="/qrcode/tools" @click="StatisticsData(120,161)" title="更多高级功能">更多工具</router-link></li>
        <li class="pull-right right-nav-items none-after-form">
          <ul>
            <li class="pull-left nav-tool-popover-scan-new">
              <router-link class="template-code" data-analyze="8,118010" to="/qrcode/template" id="__index_template">
                <i class="clifont anticon-moban1"></i>
                模板库建码
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <div class="wrapper new-light mobile-scene-min-width">
      <div class="page-main-content p-b-md url-sub-wrapper">
        <div class="alert alert-warning none" id="VerifyTip"></div>
        <div class="row noMagrin">
          <div class="col-md-8 noPadding" style="width: 67.6%; float: left;">
            <div class="nav-tabs" style="margin-top: 38px">
              <ul class="nav-tabs_ul">
                <li class="nav-tabs_item active">
                  <span data-target="#tab1" data-toggle="tab" data-type="static_url_code" onclick="StatisticsData(122,13)">网址静态码</span>
                </li>
                <li class="nav-tabs_item" id="generateActiveTab">
                  <span data-target="#tab2" data-toggle="tab" data-type="active_url_code" onclick="StatisticsData(122,14)">网址跳转活码</span>
                </li>
              </ul>
              <div class="clearfix"></div>
            </div>

            <div class="qrgenerate-box">
              <div class="m-y text-grey-color staticQrTip" id="staticQrTip">
                <span>扫码可直接跳转，但生成后内容不可修改，无法统计扫描量</span>
                <a class="grey45-link link" href="help/95907.html" target="_blank">
                  <i class="clifont anticon-cli-question-o"></i>
                </a>
              </div>
              <div class="m-y text-grey-color text-xs none" id="commonQrTip">
                <span>可随时修改目标网址，码图案不变，并可统计扫描量；安全性未知的网址需通过安全提示页跳转</span>
                <a class="grey45-link link" href="help/95907.html" target="_blank">
                  <i class="clifont anticon-cli-question-o" style="position: relative;top: 2px;"></i>
                </a>
              </div>

              <div>
                <div class="" id="url_main">
                  <div class="m-y" style="position: relative">
                    <input
                      class="form-control form-control-lg"
                      id="url_content"
                      name="text"
                      placeholder="http://"
                      style="font-size: 16px;"
                      type="text"
                      value=""
                      v-model="urlContent"
                      @input="onUrlInput"
                      @blur="onUrlBlur"
                      @focus="onUrlFocus"
                    />
                    <p class="url-error-text">*请输入格式正确的网址</p>
                    <p class="none" id="multi-url-tips" style="position: absolute; right: 0; top: -2rem; font-size: 12px;">
                      <a class="grey45-link link" href="javascript:;" id="multiple-url" rel="nofollow">多个网址生成一个二维码</a>
                    </p>
                    <p id="single-url-tips" style="position: absolute; right: 0; top: -2rem; font-size: 12px;">
                      <span class="grey45-link link" id="single-url">批量生码</span>
                    </p>
                  </div>
                </div>
              </div>

              <!-- Tab content for static code -->
              <div aria-expanded="false" class="tab-pane animated fadeIn active" id="tab1">
                <input id="tjurl" type="hidden" value=""/>
                <input id="tjuid" type="hidden" value=""/>
                <input id="tjcoding" type="hidden" value=""/>
                <input id="isturn" type="hidden" value=""/>

                <div class="none length-over-tip wcd-tooltip" id="length-over-tip" role="tooltip">
                  <div class="length-over-tip-arrow" id="length-over-tip-arrow" style="left: 330px;"></div>
                  <div class="length-over-tip-inner-arrow" id="length-over-tip-inner-arrow" style="left: 330px;"></div>
                  <div style="color: #666;">
                    输入字符过多，可能影响扫码识别，建议生成灵敏度更高的「活码」。
                    <a class="link text-blue" href="help/60448.html" onclick="StatisticsData(110,82)" target="_blank">活码还有什么功能？</a>
                  </div>
                </div>

                <div class="submit text-center aaa" id="submit-box" style="position: relative;">
                  <button
                    class="btn btn-fw green btn-green-shadow btn-cli-green"
                    data-loading-text="正在生成..."
                    id="click-create"
                    @click="generateQRCode"
                  >
                    生成二维码
                  </button>
                  <!-- Other buttons omitted for brevity -->
                </div>
              </div>

              <!-- Tab content for active code -->
              <div aria-expanded="true" class="tab-pane animated fadeIn" id="tab2">
                <!-- Similar structure as tab1 -->
              </div>
            </div>
          </div>

          <!-- QR Code display area -->
          <div class="include-qrfun-origin">
            <div class="qrbox col-md-4 url-qrcode-wrapper noQrCode noQrCode" data-is_create_code="0" id="qrfun-box">
              <div class="qrcode-wrapper">
                <div class="qrfun-tab-content code-tab-content">
                  <img id="snapQrimage" :src="qrImageSrc" style="display: none"/>

                  <div class="qrcode">
                    <table class="qrimage-wrap-loading qrimage-wrap b-a text-center"
                           data-loading-text="&lt;img style='margin-top: 126px;margin-bottom: 126px;width:48px;opacity:0.3;' src='//static.clewm.net/cli/images/cli-loading@2x.gif'&gt;"
                           data-qrimage-wrap=""
                           id="click-create"
                           style="border-radius:4px;">
                      <tr>
                        <td class="qrimage-td-h" data-is_create_code="0" style="color:#ececec;font-size: 16px;">
                          <img alt="生成的二维码" id="qrimage" :src="qrImageSrc"/>
                          <div class="deqr-wrapper" id="deqr-wrapper">
                            <router-link class="deqr-link" to="/qrcode/deqr" @click="StatisticsData(1,15)"
                               style="padding-right: 0;padding-left: 4px;color: #666;"
                               title="通过二维码图片，快速解析内容">
                              <span class="clifont anticon-cli-scanning"></span>解码
                            </router-link>
                          </div>
                          <span class="create-code-tip" data-create-code-tip="">
                            <img alt="二维码未生成" src="../../assets/images/ee35eb02b46b.png"/>
                          </span>
                        </td>
                      </tr>
                    </table>
                  </div>

                  <!-- Tools and beautification options -->
                  <div class="tools-v2 tools after-create-qrfun-item" style="display: block;">
                    <!-- Tools content omitted for brevity -->
                  </div>

                  <!-- QR Code bottom tools -->
                  <ul class="sub_nav qrcode-bottom sub_mobile_nav clearfix pull-right" id="qrcode-bottom-tool">
                    <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="mh_link">
                      <div class="popover_link_wrap">
                        <a class="tab_sep m-r-0 divider code-meihua-style" href="https://mh.cli.im"
                           onclick="StatisticsData(120,147101)" style="display: inline-block;" target="_blank"
                           title="快速美化二维码图案，上传logo等">
                          <span class="clifont anticon-meihua"></span>美化
                        </a>
                        <div class="top-mark"></div>
                        <div class="drop-down">
                          <span class="code-tools-adv-edit-tip">快速美化二维码图案，上传logo等</span>
                        </div>
                      </div>
                    </li>
                    <li class="popover_link pull-left nav-tool-popover-scan-new p-t-b-8 pointer mh-popover-origin" id="style-label-created">
                      <div class="popover_link_wrap">
                        <a href="javascript:;" id="style-label-created-link">
                          <span class="tab_sep m-r-0 code-meihua-style">
                            <span class="clifont anticon-zhizuobiaoqian"></span>制作标签
                          </span>
                        </a>
                        <div class="top-mark"></div>
                        <div class="drop-down">
                          <span class="code-tools-adv-edit-tip">选择模板，填入数据，批量制作标签</span>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Content sections -->
    <div class="tab-file-box new-light bottom-white-line">
      <div class="page-main-content">
        <div class="nav-fixed-empty"></div>
        <div id="tab-nav">
          <ul class="tab-ul list_tab page-main-content">
            <li class="tab-item noMarginLeft active"
                data-id="109" data-name="功能介绍" data-tab-id="109"
                data-tab-item="" data-tab-path="info" data-tab-type="blog"
                data-tab-url="/url" data-type="网址">
              <a href="url.html" rel="canonical" title="功能介绍">功能介绍</a>
            </li>
            <li class="tab-item"
                data-id="3599" data-name="讨论" data-tab-id="3599"
                data-tab-item="" data-tab-path="comment" data-tab-type="comment"
                data-tab-url="/url/comment" data-type="网址">
              <a href="url/comment.html" id="comment-tab-item" rel="canonical" title="讨论">讨论(604)</a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Article content -->
    <div class="w-p100 p-b-lg tab-url-box white tab-content-container">
      <div class="page-main-content white">
        <div class="article-tab-box clearfix" id="article">
          <div class="wordpress-article">
            <div class="wiki wordpress-article-box doc-content inline" id="wordpress_article_box">
              <div class="wait-now" id="wait_now" style="display: none;">
                <img alt="loading" src="../../assets/images/cbd0851f409c.gif"/>
              </div>
              <div class="wordpress_article_info_box entry-content" id="wordpress_article_info_box">
                <p>网址静态码，是将网址链接直接编码生成二维码，扫码后可访问相应网页。</p>
                <ul>
                  <li><strong>使用免费，不限生成数量和扫码次数</strong></li>
                  <li><strong>二维码长期有效</strong>，只要原始网址可正常访问，就能扫码打开</li>
                </ul>
                <blockquote>
                  <p>网址静态码生成后，跳转链接不可修改。如果后续有更换链接的可能，请使用网址跳转活码重新生码使用。<a href="url.html" title="前往网址跳转活码">前往网址跳转活码</a></p>
                </blockquote>

                <h2 id="网址静态码特点">网址静态码特点</h2>
                <h4 id="固定链接，无法修改">固定链接，无法修改</h4>
                <ul>
                  <li>一旦生成静态码，静态码内的链接无法修改。如需更换网址，需重新生成新的二维码。</li>
                </ul>

                <h4 id="网址越长二维码图案越复杂">网址越长二维码图案越复杂</h4>
                <ul>
                  <li>静态码图案的复杂程度取决于网址的长度和字符内容，链接越长，二维码越密集、不易识别。</li>
                  <li>如果网址过长导致识别困难，可更换使用网址跳转活码。</li>
                </ul>

                <h4 id="不显示草料安全提示页">不显示草料安全提示页</h4>
                <ul>
                  <li>扫码后直接打开网址，草料不会添加安全提示页。</li>
                  <li>但如果原网址被微信、浏览器等第三方平台认定为不安全或违规，仍会被相关平台拦截或提示风险。</li>
                </ul>

                <h2 id="批量生成网址静态码">批量生成网址静态码</h2>
                <p>如果有大量网址需要同时生成二维码，一个网址对应一个二维码，可前往<a href="batch.html" title="批量生码功能">批量生码功能</a></p>
                <p><strong>第一步</strong>：批量输入生码内容，可以在线直接输入或者上传Excel表；<br/>
                <strong>第二步</strong>：选择合适的二维码标签样式，修改标签颜色，添加logo等；<br/>
                <strong>第三步</strong>：批量生成二维码。生成后可打包下载使用。</p>
                <p><img alt="批量生码操作页面" data-height="1218" data-width="2180" src="../../assets/images/5647f4f8b91c.png"/></p>

                <h2 id="扫码后无法打开网页的常见原因">扫码后无法打开网页的常见原因</h2>
                <p>通过以下步骤进行排查与针对性处理，可以有效解决大部分"扫码后无法打开网页"的问题。</p>

                <h4 id="1-网址本身已失效">1. 网址本身已失效</h4>
                <p><strong>解决办法</strong>：将链接粘贴到浏览器，确认能否正常打开。如果无法访问说明网址失效，需更换为可用链接。</p>

                <h4 id="2-网址被第三方平台屏蔽">2. 网址被第三方平台屏蔽</h4>
                <p><strong>说明</strong>：该网址被微信、淘宝、抖音等平台封禁或限制，导致无法正常访问。<br/>
                <strong>解决办法</strong>：将链接复制到第三方平台（如微信对话框）测试访问。如果无法访问，说明网址被该平台拦截，需向对应平台提交申诉或更换其他链接。</p>

                <h4 id="3-链接内含有不可见字符">3. 链接内含有不可见字符</h4>
                <p><strong>说明</strong>：复制时带入空格或特殊字符，导致生成的二维码指向异常链接<br/>
                <strong>解决办法</strong>：将网址粘贴到文本编辑器（如记事本）中，清理空格或特殊字符后，重新生成二维码。</p>

                <h4 id="4-第三方平台限制外部链接">4. 第三方平台（淘宝，抖音等）限制外部链接</h4>
                <p><strong>说明</strong>：如果使用抖音、淘宝等APP扫码后，出现无法跳转外部网页的提示。<br/>
                <strong>解决办法</strong>：这是相关APP自身的规则限制，草料二维码无法绕过或控制。建议更换其他扫码工具（如微信或手机系统自带扫码），或与第三方平台咨询相应的解决方案。</p>

                <blockquote>
                  <p>若以上情况均已排除，但仍然无法访问，可联系我们进一步排查 <a href="api/soboten/commonLink.html" title="点此联系客服">点此联系客服</a></p>
                </blockquote>
              </div>
            </div>
            <div class="wikiOutlineWrapper" ref="outlineWrapper">
              <ul class="wikiOutlineContainer" ref="outlineContainer">
                <li v-for="(item, index) in outlineItems"
                    :key="index"
                    :class="['item', { active: activeOutlineIndex === index }]"
                    :data-target-header="item.tagName"
                    @click="scrollToHeader(item, index)">
                  <span>{{ item.text }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick, onUnmounted } from 'vue'

// Reactive data
const urlContent = ref('')
const qrImageSrc = ref('')
const account = ref('')
const tokenId = ref('')

// Wiki outline navigator instance
const wikiOutlineNavigatorIns = ref(null)

// Outline navigation state
const outlineItems = ref<Array<{ text: string, tagName: string, element: HTMLElement }>>([])
const activeOutlineIndex = ref(-1)
const isScrolling = ref(false)
const outlineWrapper = ref<HTMLElement>()
const outlineContainer = ref<HTMLElement>()

// Environment variables
const autoVersion = ref('1754556853877')
const frontUrl = ref('//static.clewm.net/nc/front')

// QR Code configuration
const QR_CONFIG = ref({
  level: "H",
  size: "500",
  bgcolor: "#ffffff",
  forecolor: "#000000",
  dotcolor_o: "000000",
  dotcolor_n: "000000",
  icon: {
    path: "",
    pos: 0,
    zoom: 0
  }
})

// Browser info
const browserInfo = ref({
  ua: '',
  language: ''
})

// Variables from original script
const isUrl = ref(3)
const fileSize = ref(2)
const qrStaticGenerateSuccess = ref(true)
const qrCreateQuick = ref(1)

// Data keys for generation
const dataKey = ref('bf57f023c49fae534a2e355918630c29')
const dataTime = ref('1754629200')

// Methods
const onUrlInput = () => {
  const val = urlContent.value
  const validVal = val.replace(/\s+/g, '').toLowerCase()

  if (!(/^(https?|ftp|file):/.test(validVal))) {
    const processedVal = val.slice(0, 2) === '//' ? ('http:' + val) : ('http://' + val)
    generateQRCodePreview(processedVal)
  } else {
    generateQRCodePreview(val)
  }
}

const onUrlBlur = () => {
  urlContent.value = urlContent.value.trim()
}

const onUrlFocus = () => {
  // Handle focus logic
}

const generateQRCodePreview = (url: string) => {
  console.log('Generating QR code for:', url)
}

const generateQRCode = () => {
  console.log('Generate QR Code clicked')
}

const waitTippy = (callback: () => void, maxRetries = 10) => {
  let retries = 0
  const check = () => {
    if (typeof (window as any).tippy === 'function') {
      callback()
    } else if (retries < maxRetries) {
      retries++
      setTimeout(check, 500)
    } else {
      console.warn('Tippy load timeout')
    }
  }
  check()
}

// Outline navigation functions
const initOutlineNavigation = () => {
  nextTick(() => {
    collectHeaders()
    setupScrollListener()
  })
}

const collectHeaders = () => {
  // Collect only h2 elements from the wordpress article content
  const headers = document.querySelectorAll('.wordpress_article_info_box h2')
  outlineItems.value = Array.from(headers).map((header: HTMLElement) => ({
    text: header.textContent || '',
    tagName: header.tagName,
    element: header
  }))
  
  // Set the first item as active by default
  if (outlineItems.value.length > 0) {
    activeOutlineIndex.value = 0
  }

  // Show or hide outline container based on whether there are headers
  if (outlineWrapper.value) {
    if (outlineItems.value.length > 0) {
      outlineWrapper.value.style.display = 'block'
      outlineContainer.value?.classList.add('hasOutline')
    } else {
      outlineWrapper.value.style.display = 'none'
      outlineContainer.value?.classList.remove('hasOutline')
    }
  }
}

const setupScrollListener = () => {
  window.addEventListener('scroll', updateActiveOutline)
}

const updateActiveOutline = () => {
  if (isScrolling.value || outlineItems.value.length === 0) return

  let activeIndex = 0 // Default to first item
  const scrollTop = window.scrollY
  const headerOffsetTop = 100 // Offset for header detection

  // Find the current active header based on scroll position
  for (let i = 0; i < outlineItems.value.length; i++) {
    const element = outlineItems.value[i].element
    const elementTop = element.offsetTop - headerOffsetTop
    
    if (scrollTop >= elementTop) {
      activeIndex = i
    } else {
      break
    }
  }

  activeOutlineIndex.value = activeIndex
}

const isElementScrolled = (element: HTMLElement): boolean => {
  const rect = element.getBoundingClientRect()
  return rect.top <= 100 // Element is considered "scrolled past" when it's 100px from top
}

const scrollToHeader = (item: { element: HTMLElement, text: string }, index: number) => {
  if (activeOutlineIndex.value === index || isScrolling.value) return

  activeOutlineIndex.value = index
  isScrolling.value = true

  // Smooth scroll to the target header
  const offsetTop = item.element.offsetTop
  window.scrollTo({
    top: offsetTop,
    behavior: 'smooth'
  })

  // Reset scrolling flag after animation
  setTimeout(() => {
    isScrolling.value = false
  }, 800)
}

// Lifecycle

onMounted(async () => {
  browserInfo.value = {
    ua: navigator.userAgent,
    language: navigator.language
  }

  document.documentElement.setAttribute('auto_version', autoVersion.value)

  await nextTick()

  waitTippy(() => {
    if ((window as any).tippy) {
      (window as any).tippy('.ai-assistant-btn', {
        content: '已接入DeepSeekR1 满血版，各类问题都可快速解答',
        arrow: false,
        interactive: true,
        theme: 'ai-assistant-btn'
      })
    }
  })

  const urlInput = document.getElementById('url_content')
  if (urlInput) {
    urlInput.focus()
  }

  const fromDecode = localStorage.getItem('__from-decode-qrcode-to-create-code')
  if (fromDecode) {
    try {
      const decoded = JSON.parse(fromDecode)
      if (decoded.type === 'url') {
        urlContent.value = decoded.content
        localStorage.removeItem('__from-decode-qrcode-to-create-code')
      }
    } catch (e) {
      console.error('Error parsing from decode data:', e)
    }
  }

  const activeUrlCode = localStorage.getItem('__to-active-url-code')
  if (activeUrlCode) {
    localStorage.removeItem('__to-active-url-code')
    urlContent.value = activeUrlCode
  }

  // Initialize outline navigation
  initOutlineNavigation()

  // Initialize QR code bottom tools event handlers
  setTimeout(() => {
    const bottomToolElement = document.getElementById('qrcode-bottom-tool')
    if (bottomToolElement) {
      // Handle title tooltips for beautify tools
      const beautifyLinks = bottomToolElement.querySelectorAll('[title="快速美化二维码图案，上传logo等"]')
      beautifyLinks.forEach(link => {
        link.addEventListener('mouseenter', function() {
          this.removeAttribute('title')
        })
        link.addEventListener('mouseleave', function() {
          this.setAttribute('title', '快速美化二维码图案，上传logo等')
        })
      })

      // Handle beautify button click
      const beautifyBtn = bottomToolElement.querySelector('[title="美化"]')
      if (beautifyBtn) {
        beautifyBtn.addEventListener('click', function(event) {
          // Note: StatisticsData function might not be available, wrap in try-catch
          try {
            if (typeof StatisticsData === 'function') {
              StatisticsData(120, 147101)
            }
          } catch (e) {
            console.log('StatisticsData not available')
          }
        })
      }
    }
  }, 200)
})

onUnmounted(() => {
  // Cleanup if needed
  wikiOutlineNavigatorIns.value = null
})
</script>

<style src="../../assets/css/490815b50ee0.css" scoped/>
<style src="../../assets/css/00b58f2b8f9a.css" scoped/>
<style src="../../assets/css/e88b6e80fbce.css" scoped/>
<style src="../../assets/css/f6d6073f1386.css" scoped/>
<style src="../../assets/css/b3291d7c3f11.css" scoped/>
<style src="../../assets/css/5e6b9bf9fd2f.css" scoped/>
<style src="../../assets/css/f1bad4dd165c.css" scoped/>
<style src="../../assets/css/c1580d903c0f.css" scoped/>
<style src="../../assets/css/963d993f037a.css" scoped/>
<style src="../../assets/css/228034f02af3.css" scoped/>
<style src="../../assets/css/acfff1e57b0e.css" scoped/>
<style src="../../assets/css/3db6acd047a4.css" scoped/>
<style src="../../assets/css/550d0fc5c52a.css" scoped/>
<style src="../../assets/css/7272988962e3.css" scoped/>
<style src="../../assets/css/b64637f7e36e.css" scoped/>
<style src="../../assets/css/cac1baa43ce6.css" scoped/>
<style src="../../assets/css/b76aaf663b7f.css" scoped/>
<style src="../../assets/css/dbece38160fc.css" scoped/>
<style src="../../assets/css/4f203d7b339f.css" scoped/>
<style src="../../assets/css/2034b15460f1.css" scoped/>

<style scoped>
/* Global smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Mobile scene minimum width */
.mobile-scene-min-width {
    min-width: 1200px;
}

/* WeChat area styles */
#wechat-area {
  position: relative;
  height: 100px;
}

#wechat-qr {
  width: 100px;
  height: 100px;
  vertical-align: bottom;
}

.logo-in-qrcode {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 20px;
  height: 20px;
}

.logo-in-qrcode img {
    width: 100%;
    height: 100%;
}

.scan-success {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: rgba(255,255,255,0.8);
    text-align: center;
    line-height: 100px;
    color: rgba(0, 0, 0, 0.87);
}

#email {
  width: 300px;
  border-radius: 4px;
}

.feedback-box .feedback-label {
  font-size: 14px;
  color: #777;
  width: 95px;
  line-height: 38px;
  float: left;
}

.feedback-box .feedback-content-500 {
  width: 408px;
}

.feedback-box .feedback-content {
  max-width: 100%;
  float: left;
}

.feedback-box .feedback-content .radio-inline {
  color: #666;
  margin-top: 10px;
}

#error-message {
  font-size: 12px;
}




/* Additional mobile scene styles */
.bottom-white-line {
  border-bottom: 1px solid #fff;
}

/* Lity content styles */
.lity-content {
    /* transform: scale(1.2); */
    max-width: 96%;
}


</style>
